<template>
  <div class="archive-basic-info-page">
    <!-- 页面头部导航 -->
    <div class="page-header">
      <div class="header-content">
        <a-breadcrumb class="page-breadcrumb">
          <a-breadcrumb-item>
            <router-link to="/archives">
              <FolderOutlined />
              生灵档案管理
            </router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <UserOutlined />
            {{ archive?.name || '档案详情' }}
          </a-breadcrumb-item>
          <a-breadcrumb-item>个人基础信息</a-breadcrumb-item>
        </a-breadcrumb>

        <div class="header-actions">
          <a-button @click="$router.push('/archives')" class="back-btn">
            <ArrowLeftOutlined />
            返回
          </a-button>

          <a-dropdown>
            <a-button type="primary">
              切换页面
              <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="basic" disabled>
                  <UserOutlined />
                  个人基础信息
                </a-menu-item>
                <a-menu-item key="life" @click="$router.push(`/archives/${archiveId}/life-history`)">
                  <ClockCircleOutlined />
                  生命历程管理
                </a-menu-item>
                <a-menu-item key="social" @click="$router.push(`/archives/${archiveId}/social-network`)">
                  <TeamOutlined />
                  社会关系网络
                </a-menu-item>
                <a-menu-item key="archive" @click="$router.push(`/archives/${archiveId}/archive-info`)">
                  <FolderOutlined />
                  档案信息
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="page-content">
      <a-row :gutter="[32, 32]">
        <!-- 左侧：档案概览卡片 -->
        <a-col :xs="24" :lg="8">
          <a-card title="档案概览" :bordered="false" class="overview-card">
            <div class="archive-overview">
              <div class="avatar-section">
                <a-avatar :src="archive?.avatar" :size="120">
                  {{ archive?.name?.charAt(0) }}
                </a-avatar>
                <h2 class="archive-name">{{ archive?.name }}</h2>
                <a-tag :color="archive?.status === 'alive' ? 'green' : 'red'" size="large">
                  {{ archive?.status === 'alive' ? '在世' : '已故' }}
                </a-tag>
              </div>

              <div class="basic-stats">
                <div class="stat-item">
                  <span class="label">档案编号：</span>
                  <span class="value">{{ archive?.id }}</span>
                </div>
                <div class="stat-item">
                  <span class="label">当前年龄：</span>
                  <span class="value">{{ archive?.age }}岁</span>
                </div>
                <div class="stat-item">
                  <span class="label">预定寿命：</span>
                  <span class="value">{{ archive?.lifespan }}岁</span>
                </div>
                <div class="stat-item">
                  <span class="label">业力值：</span>
                  <span class="value" :style="{ color: getKarmaColor(archive?.karma) }">
                    {{ archive?.karma }}
                  </span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 右侧：基础信息表单 -->
        <a-col :xs="24" :lg="16">
          <div v-if="archive" class="basic-info-container">
            <BasicInfoTab :archive="archive" @update="handleUpdateBasicInfo" />
          </div>
          <div v-else class="loading-container">
            <a-spin size="large">
              <div class="loading-text">正在加载档案信息...</div>
            </a-spin>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { FolderOutlined, UserOutlined, ArrowLeftOutlined, DownOutlined, ClockCircleOutlined, TeamOutlined } from '@ant-design/icons-vue'
import { useArchivesStore } from '@/stores'
import BasicInfoTab from '../components/BasicInfoTab.vue'

// 路由参数和数据
const route = useRoute()
const router = useRouter()
const archivesStore = useArchivesStore()

// 响应式数据
const loading = ref(false)
const archive = computed(() => archivesStore.getArchiveById(Number(route.params.id)))

// 计算属性
const archiveId = computed(() => Number(route.params.id))

// 方法
const getKarmaColor = (karma) => {
  if (karma >= 80) return '#52c41a'
  if (karma >= 40) return '#1890ff'
  if (karma >= 0) return '#faad14'
  if (karma >= -40) return '#fa541c'
  return '#f5222d'
}

const loadArchive = async () => {
  try {
    loading.value = true

    // 确保档案数据已加载
    if (!archivesStore.archives.length) {
      await archivesStore.fetchArchives()
    }

    // 检查档案是否存在
    if (!archive.value) {
      message.error('档案不存在')
      router.push('/archives')
    }
  } catch (error) {
    message.error('加载档案失败：' + error.message)
    router.push('/archives')
  } finally {
    loading.value = false
  }
}

const handleUpdateBasicInfo = async (basicInfo) => {
  try {
    const result = await archivesStore.updateBasicInfo(archiveId.value, basicInfo)
    if (result.success) {
      message.success('基础信息更新成功')
    } else {
      message.error('更新失败：' + result.error)
    }
  } catch (error) {
    message.error('更新失败：' + error.message)
  }
}

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      loadArchive()
    }
  }
)

// 生命周期
onMounted(() => {
  loadArchive()
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.archive-basic-info-page {
  min-height: 100vh;
  background: $dark-bg;

  .page-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 24px 32px;
    backdrop-filter: blur(10px);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .page-breadcrumb {
        :deep(.ant-breadcrumb-link) {
          color: $text-secondary;

          &:hover {
            color: $primary-color;
          }

          a {
            color: $text-secondary;
            text-decoration: none;

            &:hover {
              color: $primary-color;
            }
          }
        }

        :deep(.ant-breadcrumb-separator) {
          color: $text-tertiary;
        }
      }

      .header-actions {
        display: flex;
        gap: 16px;

        .back-btn {
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: $text-primary;

          &:hover {
            background: rgba(114, 46, 209, 0.1);
            border-color: $primary-color;
            color: $primary-color;
          }
        }

        .ant-btn-primary {
          background: $primary-color;
          border-color: $primary-color;

          &:hover {
            background: $primary-color-light;
            border-color: $primary-color-light;
          }
        }
      }
    }
  }

  .page-content {
    padding: 32px;
  }

  .overview-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);

    :deep(.ant-card-head) {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-card-head-title {
        color: $text-primary;
        font-weight: 600;
      }
    }

    :deep(.ant-card-body) {
      background: transparent;
      padding: 24px;
    }

    .archive-overview {
      .avatar-section {
        text-align: center;
        margin-bottom: 24px;

        .archive-name {
          margin: 16px 0 8px 0;
          color: $text-primary;
          font-size: 24px;
          font-weight: 600;
        }
      }

      .basic-stats {
        .stat-item {
          display: flex;
          justify-content: space-between;
          padding: 12px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);

          &:last-child {
            border-bottom: none;
          }

          .label {
            color: $text-secondary;
            font-size: 14px;
          }

          .value {
            color: $text-primary;
            font-weight: 500;
          }
        }
      }
    }
  }

  .basic-info-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);

    .loading-text {
      margin-top: 16px;
      color: $text-secondary;
      font-size: 16px;
    }
  }

  // 下拉菜单样式
  :deep(.ant-dropdown) {
    .ant-dropdown-menu {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);

      .ant-dropdown-menu-item {
        color: $text-primary;

        &:hover {
          background: rgba(114, 46, 209, 0.1);
          color: $primary-color;
        }

        &.ant-dropdown-menu-item-disabled {
          color: $text-tertiary;
          background: rgba(114, 46, 209, 0.05);
        }
      }
    }
  }
}

// 响应式样式
@media (max-width: 768px) {
  .archive-basic-info-page {
    .page-header {
      padding: 16px 20px;

      .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;

        .header-actions {
          width: 100%;
          justify-content: space-between;
        }
      }
    }

    .page-content {
      padding: 20px;
    }
  }
}
</style>
